<template>
  <div class="synopsis">
      <div class="synopsisBanner"></div>
      <div class="synopsisBot w1190">
          <div class="company">
             <h2 class="commonTitle">公司介绍</h2>
             <div class="companyText">
                <p>五孚数据执着深耕于金融领域，致力于为创新和变革中的保险公司、城市商业银行和互联网金融公司等机构提供创新服务，公司始终把保护客户数据安全列为公司最高优先等级的工作。同时，五孚数据在发展过程中不断积累，力争为客户提供更具商业价值的内容、数据和技术服务。</p>
                <p>面对不断发展变化的市场环境，五孚数据从未停止变革与创新的脚步。五孚数据将凭借业界领先的一站式数据服务能力以及产业链整合能力，在数据金融领域持续为用户提供多元化的行业解决方案。</p>
                <p>无论是传统金融机构还是新型互联网金融公司、无论是大型企业还是中小型企业，只要客户在进行变革和创新，五孚数据都将提供创新性、基础性的服务和金融级行业解决方案，为客户提供助力。</p>
                <p>五孚数据的宗旨是“安全、便捷、增值、多元”，立志为中国用户建立一个“创新、开放、分享、联动”的互联网金融共享平台。</p>
                <p>安全：我司配备高水平的安全技术团队，建立完善的安全管理体制，为客户打造安全的网络环境。</p>
                <p>便捷：我司将基于五孚云系统，使用大数据云计算技术，为客户定制便捷的解决方案。</p>
                <p>增值：我司拥有一支由金融专业人员组成的团队，为客户提供专业的金融服务。</p>
                <p>多元：我司的经营业务涵盖支付、互联网保险、供应链金融及数据服务等方面，各个业务齐头并进，朝着多元化方向发展。</p>
             </div>
         </div>
          <div class="develop">
              <h2 class="commonTitle">发展历程</h2>
              <div class="developBot">
                  <div class="circle">
                      <img :src="rocket">
                       <ul>
                         <li class="specific" v-for="(site,index) in sites" :key="index">
                           <h3>{{site.data}}</h3>
                           <p>{{site.thing}}</p>
                         </li>
                       </ul>
                  </div>
              </div>
          </div>
</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      banner: "img/about/aboutBanner.png",
      rocket: "img/about/rocket.png",
      sites: [
        { data: "2015-10", thing: "五孚（上海）数据科技有限公司成立" },
        { data: "2015-10", thing: '收购"连云港顺联保险代理有限公司"' },
        { data: "2016-04", thing: "郑州和上海两地进行主备机房及系统" },
        { data: "2016-04", thing: "自主开发支付系统" },
        { data: "2016-11", thing: "支付系统通过CFCA技术检测" },
        { data: "2016-12", thing: "荣获中金国盛颁发的“非金融机构支付业务设施技术证”服务认证证书" },
        { data: "2016-12", thing: "荣获2016年中国(上海)大数据产业创新峰会《优秀解决方案奖》" },
        { data: "2017-03", thing: "荣获2017区块链金融&金融科技中国年会“介甫奖”年度兼容性区块链应用奖项" },
        {
          data: "2017-04",
          thing: "五孚数据支付业务系统软件荣获中华人民共和国国家版权局颁发的《计算机软件著作权登记证书》"
        },
        { data: "2017-08", thing: "五孚数据成为《上海信息化》理事会的理事单位" }
      ]
    };
  }
};
</script>

<style lang="less">
.synopsis {
  .synopsisBanner {
    width: 100%;
    height: 500px;
    background: url("~static/img/about/aboutBanner.png") center center;
  }
  .company {
    padding: 60px 0;
    .companyText {
      margin-top: 60px;
      padding: 0 50px;
      p {
        margin-bottom: 40px;
        text-indent: 2rem;
        line-height: 16px;
        font-size: 1.4rem;
        color: #6a6a6a;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
  .develop {
    padding: 60px 0;
    .developBot {
      margin-top: 80px;
      height: 2062px;
      .circle {
        width: 125px;
        height: 125px;
        border-radius: 50%;
        background: #ebebeb;
        position: relative;
        margin: 0 auto;
        &:before {
          content: "";
          display: block;
          width: 6px;
          height: 1835px;
          background: #ebebeb;
          position: absolute;
          top: 125px;
          left: 50%;
          margin-left: -3px;
        }
        &:after {
          content: "未来我们再接再厉";
          display: block;
          width: 258px;
          height: 70px;
          line-height: 70px;
          text-align: center;
          background: #e8272b;
          color: #ffffff;
          font-size: 2rem;
          border-radius: 5px;
          position: absolute;
          top: 1960px;
          left: 50%;
          margin-left: -129px;
        }
        .specific {
          position: absolute;
          top: 160px;
          left: 125px;
          width: 380px;
          height: 140px;
          padding: 24px 25px 58px 25px;
          background: #ebebeb;
          &:before {
            content: "";
            display: block;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #ebebeb;
            // background: red;
            position: absolute;
            top: 50%;
            margin-top: -13px;
            left: -75.5px;
          }
          &:nth-child(2) {
            // 每次增加175px
            top: 335px;
            left: -380px;
            &:before {
              left: 429.5px;
            }
          }
          &:nth-child(3) {
            top: 510px;
            left: 125px;
            &:before {
              left: -75.5px;
            }
          }
          &:nth-child(4) {
            top: 685px;
            left: -380px;
            &:before {
              left: 429.5px;
            }
          }
          &:nth-child(5) {
            top: 860px;
            left: 125px;
            &:before {
              left: -75.5px;
            }
          }
          &:nth-child(6) {
            top: 1035px;
            left: -380px;
            &:before {
              left: 429.5px;
            }
          }
          &:nth-child(7) {
            top: 1210px;
            left: 125px;
            &:before {
              left: -75.5px;
            }
          }
          &:nth-child(8) {
            top: 1385px;
            left: -380px;
            &:before {
              left: 429.5px;
            }
          }
          &:nth-child(9) {
            top: 1560px;
            left: 125px;
            &:before {
              left: -75.5px;
            }
          }
          &:nth-child(10) {
            top: 1735px;
            left: -380px;
            &:before {
              left: 429.5px;
            }
          }
          h3 {
            font-size: 2rem;
            color: #3a3a3a;
            line-height: 16px;
            margin-bottom: 25px;
          }
          p {
            font-size: 1.4rem;
            color: #6c6c6c;
            line-height: 18px;
          }
        }
      }
    }
  }
}
</style>

